<template>
	<view class="" v-if="info.id">
		<!-- 		<u-navbar title-color="#fff" title=" " :background="background" :border-bottom="false" :is-back="false">

		</u-navbar> -->
		<view class="u-flex p15 module-action">
			<view class="act-block" @click="toBack">

				<u-icon name="arrow-left" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toHome">

				<u-icon name="home" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toCart">
				<u-icon name="shopping-cart" style="color: #fff;"></u-icon>
			</view>
		</view>
		<view>


			<swiper class="swiper" style="height:460px" circular @change="bannerChange">
				<swiper-item v-if="info.file">
					<view v-if="showVideo">

						<video id="myVideo" :autoplay="true" controls :src="info.file"
							style="width: 100%;height:460px"></video>
					</view>
					<view v-else @click="showVideo=true" style="position: relative">
						<view class="ic-video">
							<u-icon name="play-circle"></u-icon>
						</view>
						<image :src="info.picUrl" style="width: 100%;height:460px" mode="aspectFit"></image>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in info.sliderPicUrls" :key="index">
					<image :src="item" style="width: 100%;height:460px" mode="aspectFit"></image>
				</swiper-item>
			</swiper>

			<!-- 			<view>

				<u-swiper @change="bannerChange" @click="toBanner(curBanner)" name="picUrl" :list="info.sliderPicUrls"
					height="460">
				</u-swiper>
			</view> -->

			<view @click="goArticleInfo(15)" v-if="!isLogin" class="vip-tips u-flex p12 pt8 pb8 fz12 u-f-jsb"
				style="color: #8F6136;">
				<view>
					{{joinInfo.title}}
					<!-- 开通会员卡预计可省<span style="color: #FE3307;">￥240</span>起 -->
				</view>
				<view class="u-flex">
					加入会员
					<u-icon name="arrow-right" class="ml3"></u-icon>
				</view>
			</view>
		</view>
		<view class="p12">
			<view class="u-flex u-f-jsb">
				<view class="fz20 u-font-bold" style="color: #FE3307;">￥{{curSku.price}}</view>
				<view class="fz12 c9">已售 {{info.salesCount}}</view>
			</view>
			<view class="u-flex fz12 c9" v-if="curSku.marketPrice">
				价格<span style="text-decoration: line-through;">￥{{curSku.marketPrice}}</span>
			</view>
			<view class="u-flex u-f-jsb">
				<view class="fz16 u-font-bold">{{info.name}}</view>
				<view class="btn-diy u-flex fz12 u-font-bold c255" @click="openSku()"
					v-if="info.type==1">
					<image src="../../static/image/ic-diy.png" style="width: 40rpx;height: 28rpx;margin-right: 8rpx;">
					</image>
					开始定制
				</view>
			</view>
			<view class="bt mt20 pt20 pb20 u-f-jsb u-flex fz13" @click="showSkuType=1,showSku=true">
				<view class="u-flex">

					<span class="c6 mr10">规格</span>
					<span>请选择规格</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view v-if="info.freeShipping" class="bt pt20 pb20 u-f-jsb u-flex fz13">
				<view class="u-flex">

					<span class="c6 mr10">运费</span>
					<span>包邮</span>
				</view>
			</view>
			<view class="bt pt20 pb20 u-f-jsb u-flex fz13" @click="showArticle=true">
				<view class="u-flex">
					<span class="c6 mr10">服务</span>
					<span>{{articleInfo.title}}</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="bt pt20 pb20 u-f-jsb u-flex fz13 bm" @click="toProduct">
				<view class="u-flex">
					<image src="https://labulado.oss-cn-guangzhou.aliyuncs.com/logo-g.png"
						style="width: 128rpx;height: 128rpx;" mode="aspectFill"></image>
					<view class="pl10">
						<image src="../../static/image/logo2.png" style="width: 356rpx;height: 60rpx;"></image>
						<view class="u-flex fz12 c9 mt5">
							<u-icon name="checkmark-circle" style="color: #3cdd8e;" class="mr2"></u-icon>企业认证
							<u-icon name="checkmark-circle" style="color: #3cdd8e;" class="mr2 ml10"></u-icon>品牌认证
						</view>
					</view>
				</view>
				<view class="brs10 btn-store u-flex fz12">
					<image src="../../static/image/ic-store.png" class="w14 h14 mr5" mode="aspectFill"></image>
					全部宝贝
				</view>
			</view>
		</view>
		<view class="">
			<view class="p12">商品详情</view>
			<u-parse :html="info.description"></u-parse>
		</view>

		<u-tabbar :showService="true" v-if="!showSku" active-color="#70B52C" v-model="curTab" @change="tabbarChange"
			:list="tabbarList" :mid-button="true"></u-tabbar>

		<u-popup v-model="showArticle" mode="bottom" :closeable="true">
			<view class="pt16">
				<view class="u-flex bm u-f-justify pb15">
					{{articleInfo.title}}
				</view>
				<view class="p15">
					<scroll-view style="height: 700rpx;overflow: auto;">
						<view v-html="articleInfo.content"></view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-popup :zIndex="998" :overlayStyle="{  
        zIndex: 997  
      }" v-model="showSku" mode="bottom" :closeable="true">
			<view v-if="showSku">
				<view class="p20">
					<view class="u-f-justify fz14 u-font-bold">选择规格</view>
					<view class="u-flex mt15" style="align-items: flex-start;">
						<image @click="prevImg([curSku.picUrl])" class="" :src="curSku.picUrl || info.picUrl"
							style="width: 180rpx;height: 180rpx;"></image>
						<view class="pl10 u-f1">
							<view class="fz14 u-font-bold u-f-jsb u-flex u-line-1">
								{{info.name}}
							</view>

							<view class="fz12 c9 u-f-jsb u-flex mt5">
								{{curSku.skuName}}
							</view>
							<view style="color: #FE3307;" class="u-font-bold fz16 mt5">
								￥{{curSku.price}}
							</view>
							<view class="f12 c6 mt10">数量</view>
							<view class="u-flex u-f-jsb mt5">
								<view class="">
									<u-number-box :input-width="60" :input-height="50" :min="1" :size="30"
										v-model="skuNum" @change="skuNumChange"></u-number-box>
								</view>

								<button type="primary" @click="addCart()" style="background: #70B52C;"
									class="btn brs5 m0 ml15 fz12">加入购物车</button>
							</view>
						</view>
					</view>
					<view class="mt15">
						<view class="bt bm" v-if="cateList.length>1">
							<u-tabs :list="cateList" active-color="#70B52C" :is-scroll="false"
								:current="current" @change="change"></u-tabs>
						</view>
						<scroll-view scroll-y="true" class="specs mt20" style="max-height: 600rpx;">
							<template v-if="!showDiy">

								<view class="specs mb16" v-for="(item, index) in info.groupList[current].propertyList"
									:key="index">
									<view class="specs-hd p-20-0">
										<text class="f12 c6">{{ item.propertyName }}</text>
									</view>
									<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
										<view :class="['sku-item',item.curIndex==index1?'on':'']"
											v-for="(item1,index1) in item.valueList" :key="index1"
											@click="selectSku(index,index1)">
											<image v-if="item1.valuePicture" :src="item1.valuePicture"
												style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
											</image>
											{{ item1.valueName }}
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="specs mb16 spec-diy">

									<view class="u-flex" style="flex-wrap: wrap;">
										<view class="sku-item" @click="toDiy(0)" v-if="info.printId">
											<image src="../../static/image/ic-diy1.png"
												style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;">
											</image>
											打印DIY
										</view>
<!-- 										<view class="sku-item" @click="toDiy(1)" v-if="info.optionalWordId">
											<image src="../../static/image/ic-diy2.png"
												style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;">
											</image>
											立体文字
										</view> -->
										<view class="sku-item" @click="toDiy(1)">
											<image src="../../static/image/ic-diy3.png"
												style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;">
											</image>
											配饰DIY
										</view>
									</view>
								</view>
							</template>

						</scroll-view>
					</view>


				</view>
				<view class="module-btn mt10 u-flex p20 bt" v-if="!showDiy">
					<button type="primary" @click="buyNow" style="background: #70B52C;" class="btn brs5 u-f1 mr5">
						<!-- ￥169.95 -->
						立即购买</button>
					<button type="primary" v-if="info.type==1" @click="showAllTips" style="background: #70B52C;"
						class="btn brs5 u-f1 ml5">自主DIY</button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="showTips" :mask="false" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					<!-- {{remarkTips}} -->
					选<span class="xieyi">包身</span>、<span class="xieyi">盖头/长手挽</span>、<span class="xieyi">短手挽</span>后，点击<span class="xieyi">自主DIY</span>进入定制设计；如需现货点击<span class="xieyi">立即购买</span>
				</view>
				<button class="bon" @click="toDiy(0)">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSku: false,
				showArticle: false,
				showVideo: false,
				skuNum: 1,
				articleInfo: {},
				isLogin: false,
				showTips:false,
				cateList: [],
				showSkuType: 1,
				current: 0,
				remarkTips:'',
				joinInfo: {},
				showDiy: false,
				curSku: {},
				info: {},
				curTab: -1,
				tabbarList: [{
						iconPath: "kefu-ermai",
						selectedIconPath: "kefu-ermai",
						text: '客服',
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart",
						text: '加入购物车',
					},
					{
						iconPath: "",
						selectedIconPath: "",
						text: '立即购买',
						midButton: true,
					},
					{
						iconPath: "star",
						selectedIconPath: "star-fill",
						text: '收藏',
						customIcon: false,
					},
					{
						iconPath: "share",
						selectedIconPath: "share",
						text: '分享',
					},

				]

			}
		},
		onLoad(e) {
			
			// this.$api.dictList({
			// 	dictType: 'diy_word'
			// }, res => {
			// 	if (res.code == 200) {
			// 		this.remarkTips = res.data[0].remark
			// 	}
			// })
			this.getInfo(e.id)
		},
		onShow() {


			this.$api.dictList({
				dictType: 'tabbar_logo'
			}, res => {
				if (res.code == 200) {
					this.tabbarList[2].iconPath = res.data[0].remark
					this.tabbarList[2].selectedIconPath = res.data[0].remark
				}
			})
			this.$api.articleInfo({
				id: 10
			}, res => {
				if (res.code == 200) {
					this.articleInfo = res.data
				}
			})

			this.$api.articleInfo({
				id: 15
			}, res => {
				if (res.code == 200) {
					this.joinInfo = res.data
				}
			})


			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
					}
				})

			}
		},

		methods: {
			openSku(){
				
					this.showSkuType=1
					this.showSku=true
			},
			showAllTips(){
				
				
				if (!this.$db.get('diyAllTips')) {
					this.showTips = true
					this.$db.set('diyAllTips', true)
				}else{
					this.toDiy(0)
				}
			},
			toCorrect() {

				if (this.info.isCollect) {

					this.$api.productCorrectCancel({
						spuId: this.info.id
					}, res => {
						if (res.code == 200) {


							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							this.getInfo(this.info.id)
						} else {

							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				} else {

					this.$api.productCorrectCreate({
						spuId: this.info.id
					}, res => {
						if (res.code == 200) {


							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							this.getInfo(this.info.id)
						} else {

							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}

			},
			toProduct() {
				uni.switchTab({
					url: '/pages/product/index'
				})
			},
			tabbarChange(e) {
				console.log(e)
				if (e == 0) {

				} else if (e == 1) {
					// this.addCart()
					this.showSkuType = 1
					this.showSku = true
				} else if (e == 2) {
					this.openSku()
				} else if (e == 3) {
					this.toCorrect()
				}

			},
			toDiy(type) {
				
				
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.$db.set('curSku', this.curSku)
							uni.navigateTo({
								url: `/pages/diy/index?id=${this.curSku.id}&prodId=${this.info.id}&diyType=${type}`
							})
						}
					})
			},
			bannerChange() {
				this.pauseVideo()
			},
			pauseVideo() {
				uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) {
					uni.createVideoContext('myVideo', this).pause();
				}).exec();
			},
			change(e) {
				this.current = e
				this.showDiy = false
			},

			selectSku(idx, idx1) {
				this.getSkuValue(idx, idx1)
			},

			getSkuValue(idx, idx1) {
				console.log(idx, idx1, 12345)
				let lastValueId = ''
				if (idx != undefined) {
					lastValueId = this.info.groupList[this.current].propertyList[idx].valueList[idx1].valueId
				}
				let valueIds = []
				this.info.groupList.some((item, index) => {
					item.propertyList.some((item1, index1) => {
						if (idx != undefined && this.current == index && idx == index1) {
							console.log(this.current, idx1, index)
							valueIds.push(item1.valueList[idx1].valueId)

						} else {
							valueIds.push(item1.valueList[item1.curIndex].valueId)
						}

					})

				})
				this.$api.productSku({
					spuId: this.info.id,
					lastValueId: lastValueId,
					valueIds: String(valueIds)
				}, res => {
					if (res.code == 200 && res.data) {
						this.curSku = res.data
						if (idx != undefined) {

							this.info.groupList[this.current].propertyList[idx].curIndex = idx1

						}
						if (res.data.isReset) {
							
							
							uni.showToast({
								title: '当前规格无库存',
								icon: 'none'
							});
							this.info.groupList.some(item => {
								item.propertyList.some(spc => {
									spc.valueList.some((sku, skuIdx) => {
										res.data.selectValueIds.some((id) => {
											if (sku.valueId == id) {
												spc.curIndex = skuIdx
											}
										})
									})
								})
							})
						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			getInfo(id) {
				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.cateList = []
						if (this.info.groupList && this.info.groupList.length > 0) {

							this.info.groupList.some(item => {
								let i = {
									name: item.groupName
								}
								this.cateList.push(i)
								item.propertyList.some(spc => {
									this.$set(spc, 'curIndex', 0)
								})
							})

							this.getSkuValue()
						} else {
							if (this.info.skuList && this.info.skuList.length > 0) {
								this.curSku = this.info.skuList[0]
							}else{
								
								this.$common.errorToShow('该商品无库存', ress => {
									
									uni.navigateBack()
								})
							}
						}
						this.curTab = -1
						if (this.info.isCollect) {
							this.curTab = 3
						}
						if (this.info.type == 1) {
							this.tabbarList[2].text = '开始定制'
						}
					}
				})
			},


			addCart: function(e) { //加入购物车
				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return
				}
				this.$api.cartAdd({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {

						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
					} else {

						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			buyNow: function() { //立即购买

				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return
				}
				this.$api.buyNow({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {
						let ids = res.data
						this.$api.orderCheckSettlement({
							cartIds: ids,
						}, res => {
							if (res.code == 200) {

								uni.navigateTo({
									url: '/pages/product/confirm?cartIds=' + ids
								})
							} else {

								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})

					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	
	
	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}
	
	.vip-tips {
		height: 68rpx;
		background: linear-gradient(135deg, #F8F7F6 0%, #FDEDDA 50%, #FAE2DB 100%);
	}

	.ic-video {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 60rpx;
		z-index: 2;
		font-size: 80rpx;
		transform: translate(-50%, -50%);
	}

	.module-action {
		position: fixed;
		top: 36px;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.act-block {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		font-size: 36rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
	}

	.btn-diy {
		background: #76BC21;
		border-radius: 16rpx;
		padding: 26rpx 28rpx;
	}

	.btn-store {
		background: #F4F4F4;
		padding: 20rpx 10rpx;
	}

	.sku-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width:31%;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right:2%;

		&.on {
			border: 1px solid #70B52C;
			color: #70B52C;
		}
	}

	.spec-diy {
		min-height: 300rpx;

		.sku-item {
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
		}
	}
</style>